<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"  />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="onCreated" />
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
@Component({
    components: { Editor, Toolbar }
})
export default class UIEditor extends Vue {

    @Prop() data;

    html = "";

    editor = null;

    toolbarConfig = {};

    editorConfig = { placeholder: '请输入内容...' };

    mode = 'simple'; // or 'default '

    created() { }

    mounted() {
    }

    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }

    @Watch("data")
    watchData(value: any, oldValue: string) {
        this.html = value;
    }
    @Watch("html")
    watchDataHtml(value: any, oldValue: string) {
        this.$emit('editor_change', this.html);
    }

    onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        this.html = this.data;
    }

}
</script>
<style src="@wangeditor/editor/dist/css/style.css">
</style>